
</head>
<body>

<? $this->load->view('core/core_menu') ?>

<section id="midTitle">
	<div class="top-guia auto_margin">
	<div class="guia"><a href="<?= site_url()?>">INICIO</a> / <a href="<?=base_url()?>index.php/equino/reproductores">  REPRODUCTORES </a>/ </div>
	<h2></h2>
	</div>
</section>

<section id="Main">
<div class="areaListados auto_margin">
<div class="row">
	<div class="col-sm-3">
	<div class="areablSearch">
	<h3>FILTRO DE BUSQUEDA</h3>
	<span class="title">BUSCAR:</span>
	 <form method="post" action="<?=base_url()?>index.php/equino/reproductores" id="formB">
     <input type="" name="busqueda" value="<?= $busqueda ?>" class="inp-s"/>
     <input type="hidden" name="modalidad" id="modalidadForm">
     <input type="hidden" name="raza" id="razaForm">
     <input type="hidden" name="sexo" id="sexoForm">
     <input type="hidden" name="color" id="colorForm">
     </form>
	<ul>
		<li><h4>MODALIDAD:</h4>
		<ul id="modalidad">
			<li><a href="javascript:void(0)" class="A">Trote y Galope (P1)</a></li>
			<li><a href="javascript:void(0)" class="A">Trocha y Galope (P2)</a></li>
			<li><a href="javascript:void(0)" class="A">Trocha (P3)</a></li>
			<li><a href="javascript:void(0)" class="A">Paso Fino (P4)</a></li>
			<li><a href="javascript:void(0)" class="A">Mulares y Asnales</a></li>
		</ul>
		</li>
        
        <li><h4>RAZA:</h4>
        <ul id="raza">
             <li><a href="javascript:void(0)" class="A">Caballo Criollo Colombiano</a></li>
             <li><a href="javascript:void(0)" class="A">Pony</a></li>
             <li><a href="javascript:void(0)" class="A">Mini Horse</a></li>
             <li><a href="javascript:void(0)" class="A">Pinto Americano</a></li>
             <li><a href="javascript:void(0)" class="A">Cuarto de Milla</a></li>
             <li><a href="javascript:void(0)" class="A">Apalussa</a></li>
             <li><a href="javascript:void(0)" class="A">Percherón</a></li>
             <li><a href="javascript:void(0)" class="A">Frisón</a></li>
             <li><a href="javascript:void(0)" class="A">Árabe</a></li>
    	</ul>
        </li>                 
		
		<li><h4>SEXO:</h4>
		<ul id="sexo">
			<li><a href="javascript:void(0)" class="A">Macho</a></li>
			<li><a href="javascript:void(0)" class="A">Hembra</a></li>
			<li><a href="javascript:void(0)" class="A">Castrado</a></li>
		</ul>
		</li>
		
		<li><h4>COLOR:</h4>
		<ul id="color">
                         <li><a href="javascript:void(0)" class="A">Castaño</a></li>
                         <li><a href="javascript:void(0)" class="A">Zaino</a></li>
                         <li><a href="javascript:void(0)" class="A">Moro</a></li>
                         <li><a href="javascript:void(0)" class="A">Bayo</a></li>
                         <li><a href="javascript:void(0)" class="A">Cervuno</a></li>
                         <li><a href="javascript:void(0)" class="A">Alazán</a></li>
                         <li><a href="javascript:void(0)" class="A">Isabelino</a></li>
                         <li><a href="javascript:void(0)" class="A">Otro</a></li>
		</ul>
		</li>
		
	</ul>
	</div>
	</div>
	<div class="col-sm-9">
	<div class="Listado">
		<div class="row">
			
		<? if(count($equinos)){
             foreach($equinos as $equino)
             { ?>
			
            <div class="col-sm-4">
				<div class="item">
					<a href="<?=base_url()?>index.php/equino/detalles/<?= $equino['id_equino'] ?>/<?= url_title($equino['nombre']) ?>">
					<figure><img src="<?=base_url()?>uploads/equinos/m<?= $equino['imagen'] ?>" alt="" class="img-responsive" /></figure>
					<span class="more"></span>
					<h3><?= $equino['nombre'] ?></h3>
					<div class="bOpt">
						<span class="tt1">MODALIDAD:</span>
						<span class="tt2"><?= $equino['andar'] ?></span>
					</div>
					<span class="price">$<?= number_format($equino['precio'], 0, ',', '.') ?></span>
					</a>
				</div>
			</div>
         <?   }
		    }else{ echo '<div class="title"><h3>	No hay equinos repoductores. Intente una nueva busqueda. <h3>';}?>     
			
		</div>
		
		<? if(count($equinos)){ ?>
		<ul class="pagination">
		  <li><a href="#">&laquo;</a></li>
		  <li><a href="#">1</a></li>
		  <li><a href="#">&raquo;</a></li>
		</ul>
         <? } ?>
		
		
	</div>	
	</div>
	</div>
	</div>
</section>


<section id="areaSlog">
	<div class="textMiddle auto_margin">
		<span class="tt1">Facilidad, comodidad y agilidad</span>
		<span class="tt2">en la venta de tu caballo,</span>
		<a href="" class="vButton">VENDE TU EQUINO</a>
	</div>
</section>

<section id="areaBanners" class="auto_margin">
	<div class="row">
		<div class="col-sm-4"><img src="http://placehold.it/318x140"></div>
		<div class="col-sm-4"><img src="http://placehold.it/318x140"></div>
		<div class="col-sm-4"><img src="http://placehold.it/318x140"></div>
	</div>
</section>
<script type="text/javascript">
    
	$("#modalidad .A").click(function () {
	    $("#modalidadForm").val($(this).html());
		$("#formB").submit();
    })
    
	$("#raza .A").click(function () {
	    $("#razaForm").val($(this).html());
		$("#formB").submit();
    })
    
	$("#sexo .A").click(function () {
	    $("#sexoForm").val($(this).html());
		$("#formB").submit();
    })
    
	$("#color .A").click(function () {
	    $("#colorForm").val($(this).html());
		$("#formB").submit();
    })
	
</script>